import React, {useState,useEffect}from 'react';
import './adminss.less'
import * as API from '../api/lf'
import { Table, Space,Select ,Pagination ,Drawer,  Radio ,Modal, Button} from 'antd';

const { Option } = Select;
const Admin: React.FC = () => {
  const [copllicirtData,setcopllicirtData]=useState<{[key:string]:string}[]>()//获取投诉内容 
  const [weti1,setweti1]=useState<string>("全部状态")//问题类型
  const  [weti2,setweti2]=useState<string>("全部类型")//最终状态 
  const [numter,setnumter]=useState<number>()//长度
  const [num,setnum]=useState<number>(1)//当前页数
  const [numIndex,setnumIndex]=useState<number>(5)//当前条数
  const [tousuData,setTousuDate ]=useState<{[key:string]:string}[]>()//被投诉的作品

  const [visible, setVisible] = useState<boolean>(false);//抽屉
  const [placement, setPlacement] = useState<any>('right');//抽屉
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);//提示弹框1通过
  const [isModalVisible2, setIsModalVisible2] = useState<boolean>(false);//提示弹框2不通过
  const [isModalVisible3, setIsModalVisible3] = useState<boolean>(false);//提示弹框3删除
  const [posnt,setponst]=useState<string>("违反社区规定")//未通过审核原因
  const [touosuID1,setTouosuID1]=useState<string>("")//获取投诉人的id
  const [touosuID2,setTouosuID2]=useState<string>("")//获取被投诉人的id
  const [touosuID4,setTouosuID4]=useState<string>("")//获取被投诉的作品id
  const [touosuID3,setTouosuID3]=useState<string>("")//投诉的作品的时间
  const [uuidter,setuuidter]=useState<string>("")//投诉数据id
  // const [numters,setnumters]=useState<number>(300)
  const [diter,posnge]=useState<string>("")//投诉id

  useEffect(()=>{
    daoyong()//获取数据
  },[num])
// 获取数据
  const daoyong=()=>{
    API.gettoushu({num,numIndex,weti1,weti2}).then((res)=>{
      setnumter(res.data.num)
      console.log(res.data.num);
      res.data.data.map((item:any,index:number)=>{
        return item.key=index
      }) 
      setcopllicirtData(res.data.data)
    })
  }
  // 通过审核的确定
  const showModal = () => {
    setIsModalVisible(false);
    // console.log("通过审核的确定");
    API.tonsgguo({touosuID1,diter}).then((res)=>{
      console.log(res);
       daoyong() //获取数据
    })
    setVisible(false)
    // setnumters(numters+1)
  };
  // 不通过审核的确定
  const handleOk = () => {
    setIsModalVisible2(false);
    console.log("不通过审核的确定");
  
    API.chaugndio({touosuID1,touosuID2,touosuID4,touosuID3,diter,posnt}).then((res)=>{
      console.log(res,59);
      daoyong()
    })
    API.remocexiajai({pnsg:touosuID4}).then(res=>{
      console.log(res);
      
    })
      setVisible(false)
  };
  //删除投诉
  const handleCancel = () => {
    API.removecomplater({uuid:uuidter}).then(res=>{
      console.log(res,132);
        daoyong()
    })
  
    setIsModalVisible3(false);
  };

const shoutypoes=[
  { text: "全部类型", ids: 0 },
  { text: "无关内容刷屏", ids: 1 },
  { text: "垃圾广告", ids: 2 },
  { text: "赌博诈骗", ids: 3 },
  { text: "色情低俗", ids: 4 },
  { text: "恐怖血腥", ids: 5 },
  { text: "引战辱骂", ids: 6 },
  { text: "违法犯罪", ids: 7 },
  { text: "政治敏感", ids: 8 },
  { text: "侵权", ids: 9 },
]
const columns = [
  {
    title: '投诉类型',
    dataIndex: 'complaintType',
    key: 'complaintType',
  },
  {
    title: '投诉内容',
    dataIndex: 'centextLst',
    key: 'centextLst',
  },
  {
    title: '投诉时间',
    dataIndex: 'complainTime',
    key: 'complainTime',
  },
  {
    title: '状态',
    key: "complaintrewis",
    dataIndex:'complaintrewis',
    render:(text: number)=>text==2?<span style={{ color:'orange'}}>待审核</span>:
    (text==3?<span style={{color:'#09e051'}} >已审核</span>:<span style={{color:'red'}} >审核中</span>)
  },
  {
    title: '操作',
     key: 'index',
    render: (text:any, record:any) => (
      <Space size="middle">
        <span style={{color:"#509df0"}} onClick={()=>{
          if(text.complaintrewis==3){
            console.log("已审核");
            info()
          }else{
            let pnsg=text.workstextID
        
            API.getDatalist({pnsg}).then((res)=>{
            setTouosuID3(res.data.data[0].workTime)//获取被投诉的作品时间
            setTousuDate(res.data.data[0])
          })
          showDrawer()//弹框
          setTouosuID4(text.workstextID)//被投诉文章id
          setTouosuID1(text.userID)//投诉人id
          setTouosuID2(text.workuserID)//被投诉人id
          posnge(text.uuid)
          // userID: 投诉人的id
          // workstextID: 12
          // workuserID: //被投诉的id
          }
          
        }}>审核</span>
        <span style={{color:"#509df0"}} onClick={()=>{
          // console.log(text.uuid,134);
          setuuidter(text.uuid)
          setIsModalVisible3(true);
        }}>删除</span>
      </Space>
    ),
  },
];

// 不通过审核原因
const yuanying=[
  { text: "无关内容刷屏", ids: 1 },
  { text: "垃圾广告", ids: 2 },
  { text: "赌博诈骗", ids: 3 },
  { text: "色情低俗", ids: 4 },
  { text: "恐怖血腥", ids: 5 },
  { text: "引战辱骂", ids: 6 },
  { text: "违法犯罪", ids: 7 },
  { text: "政治敏感", ids: 8 },
  { text: "侵权", ids: 9 },
]

function info() {
  Modal.info({
    title: '重要通知',
    content: (
      <div className='shenhe'>
        <p>已审核完毕,不可再次审核</p>
      </div>
    ),
    onOk() {},
  });
}



// 抽屉=========
function onChange(pageNumber: any) {
  setnum(pageNumber)
  console.log('Page: ', pageNumber);
}
  const showDrawer = () => {
    setVisible(true);
  };

  const onChangess = (e: any) => {
    setPlacement(e.target.value);
  };

  const onClose = () => {
    setVisible(false);
  };
//==============
  return (
    <div className='admin'>
      <div className='admin_title'>
        <h2>举报投诉审核列表</h2>
      </div>
        <div className='admin_top'>
          <div className='clele_select'>
             <Select defaultValue="全部类型" style={{ width: 160 }} bordered={false} onChange={(e)=>{
                  // console.log(e);
                  setweti2(e)
                }}>
            {
            shoutypoes.map((item,index)=>{
              return <Option value={item.text} key={item.ids}>{item.text}</Option>
            })
            }
         </Select>
          </div>
          <div className='clele_select'>
             <Select defaultValue="全部状态" style={{ width: 160 }} bordered={false} onChange={(e)=>{
                   console.log(e);
                  setweti1(e)
                }}>
           <Option value="-1">全部状态</Option>
           <Option value="3">已审核</Option>
           <Option value="2">待审核</Option>
         </Select>
          </div>
          <p className='ss_p' onClick={()=>{
                   console.log("搜索");
                   daoyong()
          }}>搜索</p>
        </div>
        {/* 表格 */}
        <div className='admin_main'>
        <Table columns={columns} dataSource={copllicirtData} pagination={false} />
        </div>
        <div className='admin_footer'>
        <Pagination showQuickJumper defaultCurrent={1}  pageSize={numIndex} total={numter} onChange={onChange} />
        </div>

{/* 对作品行审核 通过给举报者 一个回复  被举报者没有 
  不通过给举报者一个回复 被举报的作品下架
*/}
        <>
      <Drawer
        title="查看审核内容"
        placement={placement}
        width={800}
        onClose={onClose}
        visible={visible}
        closable={false}
      >
      
        <div className='sheting_top'></div>
        <div className='sheting_main'>
            {
              (tousuData as any)?.workType=="1"?<div className='sheting_img'>
                  <img src={ (tousuData as any)?.workMain} alt="" />
              </div>:((tousuData as any)?.workType=="2"?<div className='shengting_vodie'>
                <video src={ (tousuData as any)?.workMain} controls></video>
              </div>:
              ((tousuData as any)?.workType=="4"?<div className='sheting_text'>
                <h3>内容：</h3>
                <p className='text_p'>{(tousuData as any)?.workMain}</p>
              </div>:<div className='sheting_adioe'>
                  <img src={(tousuData as any)?.musicImg} alt="" />

                  <audio src={(tousuData as any)?.workMain} controls></audio>
              </div>))
            }
            <div className='sheting_text'>

              <p>简介：{(tousuData as any)?.workText}</p>
            </div>
        </div>
        <div className='sheting_footer'>
          <p className='footer_p1' onClick={()=>{
            setIsModalVisible(true)
          }}>通过</p>
          <p className='footer_p2' onClick={()=>{
            setIsModalVisible2(true)
          }}>不通过</p>
        </div>
      </Drawer>
    </>
    <>
      <Modal
        title="通过审核"
        centered
        visible={isModalVisible}
        onOk={ showModal}
        onCancel={() => setIsModalVisible(false)}
        width={600}
      >
        <div className='tong'>
          <p>确认无误并通过审核?</p>
        </div>
      </Modal>
    </>
    <>
      <Modal
        title="不通过审核"
        centered
        visible={isModalVisible2}
        onOk={handleOk}
        onCancel={() => setIsModalVisible2(false)}
        width={600}
      >
      <div className='nerirong'>
        <span>未通过审核原因:</span>
        <div className='yangshi'>
          <Select defaultValue="违反社区规定" style={{ width: 160 }} bordered={false} onChange={(e)=>{
                  setponst(e)
                }}>
            {
            yuanying.map((item,index)=>{
              return <Option value={item.text} key={item.ids}>{item.text}</Option>
            })
            }
         </Select>
        </div>
        
      </div>
       
      </Modal>
    </>
    <>
      <Modal
        title=""
        centered
        visible={isModalVisible3}
        onOk={handleCancel}
        onCancel={() => setIsModalVisible3(false)}
        width={300}
      >
     <div className='otpsm'>
            <p>确定删除当前投诉?</p>
     </div>
       
      </Modal>
    </>
    </div>
  );
};


export default Admin;
